<!--
	This file is part of ELCube.
	ELCube is free software: you can redistribute it and/or modify
	it under the terms of the GNU Affero General Public License as published by
	the Free Software Foundation, either version 3 of the License, or
	(at your option) any later version.
	ELCube is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
	GNU Affero General Public License for more details.
	You should have received a copy of the GNU Affero General Public License
	along with ELCube.  If not, see <https://www.gnu.org/licenses/>.
-->
<template>
    <span v-if="!editMode">
      <template v-if="value !== undefined && value !== null && inputOptions.truth">
          {{value | nkNumber(inputOptions.format||'% 0.0000')}}
      </template>
      <template v-else-if="value !== undefined && value !== null">
          {{value && value/100 | nkNumber(inputOptions.format||'% 0.0000')}}
      </template>
        <template v-else-if="designMode">
            {{0.99 | nkNumber(inputOptions.format||'% 0.0000')}}
        </template>
      <span v-else class="empty"></span>
    </span>
    <a-select size="small"
              v-else-if="options"
              v-model="val"
              mode="default"
              :options="options"
              @change="selectChange">
    </a-select>
    <a-input-number size="small"
                    v-else
                    v-model="val"
                    @change="change"
                    @blur="blur"

                    :formatter      ="percentFormat"
                    :parser         ="percentParse"

                    :max="inputOptions.max"
                    :min="inputOptions.min"
                    :precision="inputOptions.digits"
                    :step="inputOptions.step"
    ></a-input-number>
</template>

<script>
export default {
    props:{
        value: {},
        editMode: Boolean,
        inputOptions: {
            type:Object,
            default(){
                return {}
            }
        },
        designMode: Boolean
    },
    data(){
        return {
            old: undefined
        }
    },
    mounted(){
        this.old = this.val;
    },
    computed:{
        options(){
            if(this.inputOptions && this.inputOptions.options){
                return this.inputOptions.options.map(i=>{
                    return {key:i,label:i}
                });
            }
        },
        val:{
            get(){
                if(this.inputOptions.truth){
                    return (this.value || this.value === 0) && this.value * 100;
                }
                return this.value;
            },
            set(value){
                if(value === undefined || value === ''){
                    this.$emit('input', value || undefined);
                }else if(this.inputOptions.truth) {
                    this.$emit('input', value * 0.01);
                }else{
                    this.$emit('input', value);
                }
            }
        }
    },
    methods:{
        percentParse(value){
            return value && value.replace(/[,%]/, '');
        },
        percentFormat(value){
            if(value===undefined || value === ''){
                return value;
            }
            return value+'%';
        },
        blur(){
            if(this.old !== this.val){
                this.old = this.val;
                this.$emit('change',{});
            }
        },
        selectChange(){
            this.blur();
        }
    }
}
</script>

<style scoped>

</style>